<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中山大学软件工程学习共享平台</title>
    <link rel="stylesheet" href="dashboard.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <meta name="description" content="中山大学软件工程学习共享平台 - 提供优质课程资源、学习资料和交流社区">
    <style>
        /* 首页特定样式 */
        .hero-section {
            background: linear-gradient(135deg, #00a854 0%, #008d45 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
            margin-bottom: 40px;
        }

        .hero-content h1 {
            font-size: 48px;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .hero-content p {
            font-size: 20px;
            margin-bottom: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.9;
        }

        .hero-cta {
            background-color: white;
            color: #00a854;
            border: none;
            padding: 15px 40px;
            font-size: 18px;
            font-weight: 500;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .hero-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .section-title {
            text-align: center;
            font-size: 32px;
            margin-bottom: 40px;
            color: #333;
            position: relative;
        }

        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background-color: #00a854;
            margin: 15px auto 0;
        }

        .feature-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 60px;
        }

        .feature-card {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            text-align: center;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }

        .feature-icon {
            font-size: 48px;
            color: #00a854;
            margin-bottom: 20px;
        }

        .feature-card h3 {
            font-size: 20px;
            margin-bottom: 15px;
            color: #333;
        }

        .feature-card p {
            color: #666;
            line-height: 1.6;
        }

        .popular-courses {
            background-color: #fafafa;
            padding: 60px 0;
            margin-bottom: 60px;
        }

        .courses-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

        .course-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }

        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }

        .course-cover {
            height: 180px;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;
        }

        .course-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .course-card:hover .course-cover img {
            transform: scale(1.05);
        }

        .course-info {
            padding: 20px;
        }

        .course-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 10px;
            color: #333;
            height: 48px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .course-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #666;
        }

        .course-teacher {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .teacher-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }

        .course-stats {
            display: flex;
            gap: 15px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .category-section {
            margin-bottom: 60px;
        }

        .categories-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }

        .category-card {
            background-color: white;
            border-radius: 8px;
            padding: 25px 20px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .category-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            color: #00a854;
        }

        .category-icon {
            font-size: 36px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .category-card:hover .category-icon {
            transform: scale(1.1);
        }

        .activity-section {
            background-color: #fafafa;
            padding: 60px 0;
            margin-bottom: 60px;
        }

        .activity-content {
            display: flex;
            gap: 40px;
        }

        .recent-activities {
            flex: 1;
        }

        .activity-item {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .activity-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #f0f9ff;
            color: #00a854;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }

        .activity-info {
            flex: 1;
        }

        .activity-text {
            margin-bottom: 5px;
            font-size: 15px;
            color: #333;
        }

        .activity-time {
            font-size: 13px;
            color: #999;
        }

        .quick-links {
            width: 300px;
        }

        .link-list {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .link-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
            transition: color 0.3s ease;
            cursor: pointer;
            color: #333;
        }

        .link-item:last-child {
            border-bottom: none;
        }

        .link-item:hover {
            color: #00a854;
        }

        .link-icon {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            background-color: #f0f9ff;
            color: #00a854;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }

        .link-text {
            font-size: 15px;
        }

        .stats-section {
            background-color: white;
            padding: 40px 0;
            margin-bottom: 60px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            text-align: center;
        }

        .stat-card {
            padding: 20px;
        }

        .stat-number {
            font-size: 36px;
            font-weight: bold;
            color: #00a854;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 16px;
            color: #666;
        }

        .newsletter-section {
            background-color: #00a854;
            color: white;
            padding: 60px 0;
            text-align: center;
        }

        .newsletter-content h3 {
            font-size: 28px;
            margin-bottom: 15px;
        }

        .newsletter-content p {
            font-size: 16px;
            margin-bottom: 30px;
            opacity: 0.9;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .newsletter-form {
            display: flex;
            max-width: 600px;
            margin: 0 auto;
            gap: 10px;
        }

        .newsletter-input {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            outline: none;
        }

        .newsletter-btn {
            background-color: #333;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .newsletter-btn:hover {
            background-color: #555;
            transform: translateY(-2px);
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .courses-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .categories-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 992px) {
            .hero-content h1 {
                font-size: 36px;
            }

            .feature-cards {
                grid-template-columns: repeat(2, 1fr);
            }

            .courses-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .categories-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .activity-content {
                flex-direction: column;
            }

            .quick-links {
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 28px;
            }

            .hero-content p {
                font-size: 16px;
            }

            .feature-cards {
                grid-template-columns: 1fr;
            }

            .courses-grid {
                grid-template-columns: 1fr;
            }

            .categories-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .newsletter-form {
                flex-direction: column;
            }
        }

        @media (max-width: 576px) {
            .categories-grid {
                grid-template-columns: 1fr;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="header">
    <div class="container">
        <div class="header-top">
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
                <span>中山大学软件工程学习共享平台</span>
            </div>
            <div class="nav-links">
                <a href="index.html" class="nav-link active">首页</a>
                <a href="../课件浏览页/index.html" class="nav-link">课件浏览</a>
                <a href="#courses" class="nav-link">课程</a>
                <a href="#materials" class="nav-link">共享</a>
                <a href="#forum" class="nav-link">讨论区</a>
                <a href="#favorites" class="nav-link">收藏</a>
            </div>
            <div class="user-actions">
                <div class="search-box">
                    <input type="text" placeholder="搜索课程/老师/学校">
                    <button class="search-btn"><i class="fas fa-search"></i></button>
                </div>
                <div class="user-avatar">
                    <img src="https://picsum.photos/id/1005/40/40" alt="用户头像">
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 英雄区域 -->
<section class="hero-section">
    <div class="container">
        <div class="hero-content">
            <h1>探索知识，共享成长</h1>
            <p>中山大学软件工程学习共享平台，连接师生，促进优质教育资源共享与交流</p>
            <button class="hero-cta">
                <i class="fas fa-search"></i> 探索课程
            </button>
        </div>
    </div>
</section>

<!-- 特色功能区域 -->
<section class="features-section">
    <div class="container">
        <h2 class="section-title">平台特色</h2>
        <div class="feature-cards">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-book"></i>
                </div>
                <h3>丰富的学习资源</h3>
                <p>汇集优质课程、课件、习题等多种学习资料，满足不同学习需求</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>活跃的学习社区</h3>
                <p>建立师生交流平台，促进知识共享与问题讨论，共同成长</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-laptop-code"></i>
                </div>
                <h3>实践与应用</h3>
                <p>结合理论与实践，提供编程环境与项目实践，培养实际应用能力</p>
            </div>
        </div>
    </div>
</section>

<!-- 热门课程区域 -->
<section class="popular-courses">
    <div class="container">
        <h2 class="section-title">热门课程</h2>
        <div class="courses-grid">
            <div class="course-card">
                <div class="course-cover">
                    <img src="https://picsum.photos/id/1/400/250" alt="高等数学">
                </div>
                <div class="course-info">
                    <div class="course-title">高等数学（上）- 函数与极限</div>
                    <div class="course-meta">
                        <div class="course-teacher">
                            <img src="https://picsum.photos/id/1005/40/40" alt="张教授" class="teacher-avatar">
                            <span>张教授</span>
                        </div>
                        <div class="course-stats">
                            <div class="stat-item">
                                <i class="fas fa-user"></i>
                                <span>1240</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-star"></i>
                                <span>4.8</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="course-card">
                <div class="course-cover">
                    <img src="https://picsum.photos/id/2/400/250" alt="数据结构">
                </div>
                <div class="course-info">
                    <div class="course-title">数据结构与算法分析</div>
                    <div class="course-meta">
                        <div class="course-teacher">
                            <img src="https://picsum.photos/id/1006/40/40" alt="李教授" class="teacher-avatar">
                            <span>李教授</span>
                        </div>
                        <div class="course-stats">
                            <div class="stat-item">
                                <i class="fas fa-user"></i>
                                <span>986</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-star"></i>
                                <span>4.9</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="course-card">
                <div class="course-cover">
                    <img src="https://picsum.photos/id/3/400/250" alt="计算机网络">
                </div>
                <div class="course-info">
                    <div class="course-title">计算机网络原理与应用</div>
                    <div class="course-meta">
                        <div class="course-teacher">
                            <img src="https://picsum.photos/id/1007/40/40" alt="王教授" class="teacher-avatar">
                            <span>王教授</span>
                        </div>
                        <div class="course-stats">
                            <div class="stat-item">
                                <i class="fas fa-user"></i>
                                <span>1150</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-star"></i>
                                <span>4.7</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="course-card">
                <div class="course-cover">
                    <img src="https://picsum.photos/id/4/400/250" alt="操作系统">
                </div>
                <div class="course-info">
                    <div class="course-title">操作系统原理</div>
                    <div class="course-meta">
                        <div class="course-teacher">
                            <img src="https://picsum.photos/id/1008/40/40" alt="刘教授" class="teacher-avatar">
                            <span>刘教授</span>
                        </div>
                        <div class="course-stats">
                            <div class="stat-item">
                                <i class="fas fa-user"></i>
                                <span>890</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-star"></i>
                                <span>4.6</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center; margin-top: 30px;">
            <a href="#" style="color: #00a854; text-decoration: none; font-weight: 500;">
                查看全部课程 <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<!-- 课程分类区域 -->
<section class="category-section">
    <div class="container">
        <h2 class="section-title">课程分类</h2>
        <div class="categories-grid">
            <div class="category-card">
                <div class="category-icon">
                    <i class="fas fa-calculator"></i>
                </div>
                <div class="category-name">数学类</div>
            </div>
            <div class="category-card">
                <div class="category-icon">
                    <i class="fas fa-code"></i>
                </div>
                <div class="category-name">计算机基础</div>
            </div>
            <div class="category-card">
                <div class="category-icon">
                    <i class="fas fa-database"></i>
                </div>
                <div class="category-name">数据库</div>
            </div>
            <div class="category-card">
                <div class="category-icon">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <div class="category-name">移动开发</div>
            </div>
            <div class="category-card">
                <div class="category-icon">
                    <i class="fas fa-cloud"></i>
                </div>
                <div class="category-name">云计算</div>
            </div>
        </div>
    </div>
</section>

<!-- 平台数据统计 -->
<section class="stats-section">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">200+</div>
                <div class="stat-label">精品课程</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">1000+</div>
                <div class="stat-label">学习资料</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">5000+</div>
                <div class="stat-label">注册用户</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">98%</div>
                <div class="stat-label">用户满意度</div>
            </div>
        </div>
    </div>
</section>

<!-- 最新活动和快速链接 -->
<section class="activity-section">
    <div class="container">
        <h2 class="section-title">最新动态</h2>
        <div class="activity-content">
            <div class="recent-activities">
                <div class="activity-item">
                    <div class="activity-icon">
                        <i class="fas fa-book"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-text">张教授上传了新课件《高等数学（下）- 多元函数微积分》</div>
                        <div class="activity-time">2小时前</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-text">李同学在《数据结构》讨论区发起了新话题</div>
                        <div class="activity-time">5小时前</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-text">《操作系统原理》课程获得了用户的高度评价</div>
                        <div class="activity-time">昨天</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-text">平台新增了10门精品课程，涵盖多个专业领域</div>
                        <div class="activity-time">2天前</div>
                    </div>
                </div>
            </div>
            <div class="quick-links">
                <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">快速链接</h3>
                <div class="link-list">
                    <div class="link-item">
                        <div class="link-icon">
                            <i class="fas fa-tasks"></i>
                        </div>
                        <div class="link-text">课程表查询</div>
                    </div>
                    <div class="link-item">
                        <div class="link-icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <div class="link-text">考试安排</div>
                    </div>
                    <div class="link-item">
                        <div class="link-icon">
                            <i class="fas fa-user-graduate"></i>
                        </div>
                        <div class="link-text">教师团队</div>
                    </div>
                    <div class="link-item">
                        <div class="link-icon">
                            <i class="fas fa-question-circle"></i>
                        </div>
                        <div class="link-text">常见问题</div>
                    </div>
                    <div class="link-item">
                        <div class="link-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="link-text">联系我们</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 订阅通知 -->
<section class="newsletter-section">
    <div class="container">
        <div class="newsletter-content">
            <h3>订阅最新通知</h3>
            <p>获取课程更新、活动通知和学习资源推荐</p>
            <form class="newsletter-form">
                <input type="email" placeholder="请输入您的邮箱" class="newsletter-input">
                <button type="submit" class="newsletter-btn">订阅</button>
            </form>
        </div>
    </div>
</section>

<!-- 返回顶部按钮 -->
<button class="back-to-top">
    <i class="fas fa-arrow-up"></i>
</button>

<!-- 页脚 -->
<footer style="background-color: #333; color: white; padding: 40px 0;">
    <div class="container">
        <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
            <div style="flex: 1; min-width: 250px; margin-bottom: 20px;">
                <div style="font-size: 20px; font-weight: bold; margin-bottom: 20px; display: flex; align-items: center;">
                    <i class="fas fa-graduation-cap" style="margin-right: 10px;"></i>
                    <span>中山大学软件工程学习共享平台</span>
                </div>
                <p style="color: #ccc; line-height: 1.6;">连接师生，促进优质教育资源共享与交流，助力每一位学习者成长</p>
            </div>
            <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
                <h4 style="font-size: 16px; margin-bottom: 20px;">快速链接</h4>
                <ul style="list-style: none; padding: 0;">
                    <li style="margin-bottom: 10px;"><a href="#" style="color: #ccc; text-decoration: none;">首页</a></li>
                    <li style="margin-bottom: 10px;"><a href="#" style="color: #ccc; text-decoration: none;">课程</a></li>
                    <li style="margin-bottom: 10px;"><a href="#" style="color: #ccc; text-decoration: none;">共享</a></li>
                    <li style="margin-bottom: 10px;"><a href="#" style="color: #ccc; text-decoration: none;">讨论区</a></li>
                </ul>
            </div>
            <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
                <h4 style="font-size: 16px; margin-bottom: 20px;">联系我们</h4>
                <ul style="list-style: none; padding: 0;">
                    <li style="margin-bottom: 10px; display: flex; align-items: center;">
                        <i class="fas fa-map-marker-alt" style="margin-right: 10px;"></i>
                        <span>中山大学软件学院</span>
                    </li>
                    <li style="margin-bottom: 10px; display: flex; align-items: center;">
                        <i class="fas fa-envelope" style="margin-right: 10px;"></i>
                        <span>contact@example.com</span>
                    </li>
                    <li style="margin-bottom: 10px; display: flex; align-items: center;">
                        <i class="fas fa-phone" style="margin-right: 10px;"></i>
                        <span>020-12345678</span>
                    </li>
                </ul>
            </div>
        </div>
        <div style="border-top: 1px solid #444; margin-top: 30px; padding-top: 20px; text-align: center; color: #ccc;">
            <p>&copy; 2023 中山大学软件工程学习共享平台. 保留所有权利.</p>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script src="js/app.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中山大学软件工程学习共享平台</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <meta name="description" content="中山大学软件工程学习共享平台 - 提供优质课程资源、学习资料和交流社区">
    <style>
        /* 首页特定样式 */
        .hero-section {
            background: linear-gradient(135deg, #00a854 0%, #008d45 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
            margin-bottom: 40px;
        }

        .hero-content h1 {
            font-size: 48px;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .hero-content p {
            font-size: 20px;
            margin-bottom: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.9;
        }

        .hero-cta {
            background-color: white;
            color: #00a854;
            border: none;
            padding: 15px 40px;
            font-size: 18px;
            font-weight: 500;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .hero-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .section-title {
            text-align: center;
            font-size: 32px;
            margin-bottom: 40px;
            color: #333;
            position: relative;
        }

        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background-color: #00a854;
            margin: 15px auto 0;
        }

        .feature-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 60px;
        }

        .feature-card {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            text-align: center;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }

        .feature-icon {
            font-size: 48px;
            color: #00a854;
            margin-bottom: 20px;
        }

        .feature-card h3 {
            font-size: 20px;
            margin-bottom: 15px;
            color: #333;
        }

        .feature-card p {
            color: #666;
            line-height: 1.6;
        }

        .popular-courses {
            background-color: #fafafa;
            padding: 60px 0;
            margin-bottom: 60px;
        }

        .courses-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

        .course-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }

        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }

        .course-cover {
            height: 180px;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;
        }

        .course-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .course-card:hover .course-cover img {
            transform: scale(1.05);
        }

        .course-info {
            padding: 20px;
        }

        .course-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 10px;
            color: #333;
            height: 48px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .course-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #666;
        }

        .course-teacher {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .teacher-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }

        .course-stats {
            display: flex;
            gap: 15px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .category-section {
            margin-bottom: 60px;
        }

        .categories-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }

        .category-card {
            background-color: white;
            border-radius: 8px;
            padding: 25px 20px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .category-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            color: #00a854;
        }

        .category-icon {
            font-size: 36px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .category-card:hover .category-icon {
            transform: scale(1.1);
        }

        .activity-section {
            background-color: #fafafa;
            padding: 60px 0;
            margin-bottom: 60px;
        }

        .activity-content {
            display: flex;
            gap: 40px;
        }

        .recent-activities {
            flex: 1;
        }

        .activity-item {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .activity-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #f0f9ff;
            color: #00a854;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }

        .activity-info {
            flex: 1;
        }

        .activity-text {
            margin-bottom: 5px;
            font-size: 15px;
            color: #333;
        }

        .activity-time {
            font-size: 13px;
            color: #999;
        }

        .quick-links {
            width: 300px;
        }

        .link-list {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .link-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
            transition: color 0.3s ease;
            cursor: pointer;
            color: #333;
        }

        .link-item:last-child {
            border-bottom: none;
        }

        .link-item:hover {
            color: #00a854;
        }

        .link-icon {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            background-color: #f0f9ff;
            color: #00a854;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }

        .link-text {
            font-size: 15px;
        }

        .stats-section {
            background-color: white;
            padding: 40px 0;
            margin-bottom: 60px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            text-align: center;
        }

        .stat-card {
            padding: 20px;
        }

        .stat-number {
            font-size: 36px;
            font-weight: bold;
            color: #00a854;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 16px;
            color: #666;
        }

        .newsletter-section {
            background-color: #00a854;
            color: white;
            padding: 60px 0;
            text-align: center;
        }

        .newsletter-content h3 {
            font-size: 28px;
            margin-bottom: 15px;
        }

        .newsletter-content p {
            font-size: 16px;
            margin-bottom: 30px;
            opacity: 0.9;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .newsletter-form {
            display: flex;
            max-width: 600px;
            margin: 0 auto;
            gap: 10px;
        }

        .newsletter-input {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            outline: none;
        }

        .newsletter-btn {
            background-color: #333;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .newsletter-btn:hover {
            background-color: #555;
            transform: translateY(-2px);
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .courses-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .categories-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 992px) {
            .hero-content h1 {
                font-size: 36px;
            }

            .feature-cards {
                grid-template-columns: repeat(2, 1fr);
            }

            .courses-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .categories-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .activity-content {
                flex-direction: column;
            }

            .quick-links {
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 28px;
            }

            .hero-content p {
                font-size: 16px;
            }

            .feature-cards {
                grid-template-columns: 1fr;
            }

            .courses-grid {
                grid-template-columns: 1fr;
            }

            .categories-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .newsletter-form {
                flex-direction: column;
            }
        }

        @media (max-width: 576px) {
            .categories-grid {
                grid-template-columns: 1fr;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="header">
    <div class="container">
        <div class="header-top">
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
                <span>中山大学软件工程学习共享平台</span>
            </div>
            <div class="nav-links">
                <a href="index.html" class="nav-link active">首页</a>
                <a href="../课件浏览页/index.html" class="nav-link">课件浏览</a>
                <a href="#courses" class="nav-link">课程</a>
                <a href="#materials" class="nav-link">共享</a>
                <a href="#forum" class="nav-link">讨论区</a>
                <a href="#favorites" class="nav-link">收藏</a>
            </div>
            <div class="user-actions">
                <div class="search-box">
                    <input type="text" placeholder="搜索课程/老师/学校">
                    <button class="search-btn"><i class="fas fa-search"></i></button>
                </div>
                <div class="user-avatar">
                    <img src="https://picsum.photos/id/1005/40/40" alt="用户头像">
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 英雄区域 -->
<section class="hero-section">
    <div class="container">
        <div class="hero-content">
            <h1>探索知识，共享成长</h1>
            <p>中山大学软件工程学习共享平台，连接师生，促进优质教育资源共享与交流</p>
            <button class="hero-cta">
                <i class="fas fa-search"></i> 探索课程
            </button>
        </div>
    </div>
</section>

<!-- 特色功能区域 -->
<section class="features-section">
    <div class="container">
        <h2 class="section-title">平台特色</h2>
        <div class="feature-cards">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-book"></i>
                </div>
                <h3>丰富的学习资源</h3>
                <p>汇集优质课程、课件、习题等多种学习资料，满足不同学习需求</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>活跃的学习社区</h3>
                <p>建立师生交流平台，促进知识共享与问题讨论，共同成长</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-laptop-code"></i>
                </div>
                <h3>实践与应用</h3>
                <p>结合理论与实践，提供编程环境与项目实践，培养实际应用能力</p>
            </div>
        </div>
    </div>
</section>

<!-- 热门课程区域 -->
<section class="popular-courses">
    <div class="container">
        <h2 class="section-title">热门课程</h2>
        <div class="courses-grid">
            <div class="course-card">
                <div class="course-cover">
                    <img src="https://picsum.photos/id/1/400/250" alt="高等数学">
                </div>
                <div class="course-info">
                    <div class="course-title">高等数学（上）- 函数与极限</div>
                    <div class="course-meta">
                        <div class="course-teacher">
                            <img src="https://picsum.photos/id/1005/40/40" alt="张教授" class="teacher-avatar">
                            <span>张教授</span>
                        </div>
                        <div class="course-stats">
                            <div class="stat-item">
                                <i class="fas fa-user"></i>
                                <span>1240</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-star"></i>
                                <span>4.8</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="course-card">
                <div class="course-cover">
                    <img src="https://picsum.photos/id/2/400/250" alt="数据结构">
                </div>
                <div class="course-info">
                    <div class="course-title">数据结构与算法分析</div>
                    <div class="course-meta">
                        <div class="course-teacher">
                            <img src="https://picsum.photos/id/1006/40/40" alt="李教授" class="teacher-avatar">
                            <span>李教授</span>
                        </div>
                        <div class="course-stats">
                            <div class="stat-item">
                                <i class="fas fa-user"></i>
                                <span>986</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-star"></i>
                                <span>4.9</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="course-card">
                <div class="course-cover">
                    <img src="https://picsum.photos/id/3/400/250" alt="计算机网络">
                </div>
                <div class="course-info">
                    <div class="course-title">计算机网络原理与应用</div>
                    <div class="course-meta">
                        <div class="course-teacher">
                            <img src="https://picsum.photos/id/1007/40/40" alt="王教授" class="teacher-avatar">
                            <span>王教授</span>
                        </div>
                        <div class="course-stats">
                            <div class="stat-item">
                                <i class="fas fa-user"></i>
                                <span>1150</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-star"></i>
                                <span>4.7</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="course-card">
                <div class="course-cover">
                    <img src="https://picsum.photos/id/4/400/250" alt="操作系统">
                </div>
                <div class="course-info">
                    <div class="course-title">操作系统原理</div>
                    <div class="course-meta">
                        <div class="course-teacher">
                            <img src="https://picsum.photos/id/1008/40/40" alt="刘教授" class="teacher-avatar">
                            <span>刘教授</span>
                        </div>
                        <div class="course-stats">
                            <div class="stat-item">
                                <i class="fas fa-user"></i>
                                <span>890</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-star"></i>
                                <span>4.6</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center; margin-top: 30px;">
            <a href="#" style="color: #00a854; text-decoration: none; font-weight: 500;">
                查看全部课程 <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<!-- 课程分类区域 -->
<section class="category-section">
    <div class="container">
        <h2 class="section-title">课程分类</h2>
        <div class="categories-grid">
            <div class="category-card">
                <div class="category-icon">
                    <i class="fas fa-calculator"></i>
                </div>
                <div class="category-name">数学类</div>
            </div>
            <div class="category-card">
                <div class="category-icon">
                    <i class="fas fa-code"></i>
                </div>
                <div class="category-name">计算机基础</div>
            </div>
            <div class="category-card">
                <div class="category-icon">
                    <i class="fas fa-database"></i>
                </div>
                <div class="category-name">数据库</div>
            </div>
            <div class="category-card">
                <div class="category-icon">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <div class="category-name">移动开发</div>
            </div>
            <div class="category-card">
                <div class="category-icon">
                    <i class="fas fa-cloud"></i>
                </div>
                <div class="category-name">云计算</div>
            </div>
        </div>
    </div>
</section>

<!-- 平台数据统计 -->
<section class="stats-section">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">200+</div>
                <div class="stat-label">精品课程</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">1000+</div>
                <div class="stat-label">学习资料</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">5000+</div>
                <div class="stat-label">注册用户</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">98%</div>
                <div class="stat-label">用户满意度</div>
            </div>
        </div>
    </div>
</section>

<!-- 最新活动和快速链接 -->
<section class="activity-section">
    <div class="container">
        <h2 class="section-title">最新动态</h2>
        <div class="activity-content">
            <div class="recent-activities">
                <div class="activity-item">
                    <div class="activity-icon">
                        <i class="fas fa-book"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-text">张教授上传了新课件《高等数学（下）- 多元函数微积分》</div>
                        <div class="activity-time">2小时前</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-text">李同学在《数据结构》讨论区发起了新话题</div>
                        <div class="activity-time">5小时前</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-text">《操作系统原理》课程获得了用户的高度评价</div>
                        <div class="activity-time">昨天</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-text">平台新增了10门精品课程，涵盖多个专业领域</div>
                        <div class="activity-time">2天前</div>
                    </div>
                </div>
            </div>
            <div class="quick-links">
                <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">快速链接</h3>
                <div class="link-list">
                    <div class="link-item">
                        <div class="link-icon">
                            <i class="fas fa-tasks"></i>
                        </div>
                        <div class="link-text">课程表查询</div>
                    </div>
                    <div class="link-item">
                        <div class="link-icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <div class="link-text">考试安排</div>
                    </div>
                    <div class="link-item">
                        <div class="link-icon">
                            <i class="fas fa-user-graduate"></i>
                        </div>
                        <div class="link-text">教师团队</div>
                    </div>
                    <div class="link-item">
                        <div class="link-icon">
                            <i class="fas fa-question-circle"></i>
                        </div>
                        <div class="link-text">常见问题</div>
                    </div>
                    <div class="link-item">
                        <div class="link-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="link-text">联系我们</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 订阅通知 -->
<section class="newsletter-section">
    <div class="container">
        <div class="newsletter-content">
            <h3>订阅最新通知</h3>
            <p>获取课程更新、活动通知和学习资源推荐</p>
            <form class="newsletter-form">
                <input type="email" placeholder="请输入您的邮箱" class="newsletter-input">
                <button type="submit" class="newsletter-btn">订阅</button>
            </form>
        </div>
    </div>
</section>

<!-- 返回顶部按钮 -->
<button class="back-to-top">
    <i class="fas fa-arrow-up"></i>
</button>

<!-- 页脚 -->
<footer style="background-color: #333; color: white; padding: 40px 0;">
    <div class="container">
        <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
            <div style="flex: 1; min-width: 250px; margin-bottom: 20px;">
                <div style="font-size: 20px; font-weight: bold; margin-bottom: 20px; display: flex; align-items: center;">
                    <i class="fas fa-graduation-cap" style="margin-right: 10px;"></i>
                    <span>中山大学软件工程学习共享平台</span>
                </div>
                <p style="color: #ccc; line-height: 1.6;">连接师生，促进优质教育资源共享与交流，助力每一位学习者成长</p>
            </div>
            <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
                <h4 style="font-size: 16px; margin-bottom: 20px;">快速链接</h4>
                <ul style="list-style: none; padding: 0;">
                    <li style="margin-bottom: 10px;"><a href="#" style="color: #ccc; text-decoration: none;">首页</a></li>
                    <li style="margin-bottom: 10px;"><a href="#" style="color: #ccc; text-decoration: none;">课程</a></li>
                    <li style="margin-bottom: 10px;"><a href="#" style="color: #ccc; text-decoration: none;">共享</a></li>
                    <li style="margin-bottom: 10px;"><a href="#" style="color: #ccc; text-decoration: none;">讨论区</a></li>
                </ul>
            </div>
            <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
                <h4 style="font-size: 16px; margin-bottom: 20px;">联系我们</h4>
                <ul style="list-style: none; padding: 0;">
                    <li style="margin-bottom: 10px; display: flex; align-items: center;">
                        <i class="fas fa-map-marker-alt" style="margin-right: 10px;"></i>
                        <span>中山大学软件学院</span>
                    </li>
                    <li style="margin-bottom: 10px; display: flex; align-items: center;">
                        <i class="fas fa-envelope" style="margin-right: 10px;"></i>
                        <span>contact@example.com</span>
                    </li>
                    <li style="margin-bottom: 10px; display: flex; align-items: center;">
                        <i class="fas fa-phone" style="margin-right: 10px;"></i>
                        <span>020-12345678</span>
                    </li>
                </ul>
            </div>
        </div>
        <div style="border-top: 1px solid #444; margin-top: 30px; padding-top: 20px; text-align: center; color: #ccc;">
            <p>&copy; 2023 中山大学软件工程学习共享平台. 保留所有权利.</p>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script src="/dashboard.js"></script>
</body>
</html>